<template>
	<view>
		<view class="container">
			<view :class='["topbox",nav==0?"blue":"pink"]'>
				<image src="/static/icon/icon_rankdec.png" class="icon_rankdec"></image>
				<view class="fs34 pb20 fwb blue" v-if='nav==0'>人气排行榜</view>
				<view class="fs34 pb20 fwb red" v-if='nav==1'>热销排行榜</view>

				<picker @change="bindPickerChange" :value="index" :range="regionPickerData">
					<view class="clearfix pickerbox">
						<view class="fl">{{ regionPickerData[index] }}</view>
						<image src="/static/icon/icon_close.png" class="icon_close fr"></image>
					</view>
				</picker>
			</view>

			<view class="navbox flex-box">
				<view :class="'navitem ' + (searchCheckJson.sort == 2 ? 'active' : '')" data-navindex='2'
					@tap="choosenav">人气榜</view>
				<view :class="'navitem ' + (searchCheckJson.sort == 5 ? 'active' : '')" data-navindex='5'
					@tap="choosenav">热销榜</view>
			</view>

			<scroll-view class="scroll" scroll-y>

				<view class="houselist">
					<template v-if="houseList.total > 0">
						<navigator class="houseitem flex"
							:url="'/pages/house/building_detail/building_detail?id=' + item.id"
							v-for="(item, index) in houseList.data">
							<view class="houseimg">
								<image :lazy-load="true" :src="item.image_text" mode="aspectFill"></image>
								<view :class='["top",index>2?"grey":""]'>top{{index + 1}}</view>
							</view>
							<view class="flex-grow-1">
								<view class="flex-box flex-between pb10">
									<view class="housename m-ellipsis flex-grow-1">{{item.name}}</view>
									<view class="sale_type1">在售</view>
								</view>
								<view class="area-size flex-box flex-between">
									<text>{{ item.region }} {{ item.alias_name ? '| ' + item.alias_name : '' }}</text>
									<text>{{ item.min_space }}㎡-{{ item.max_space }}㎡</text>
								</view>
								<view class="targetbox flex flex-wrap">
									<view class="targetitem" v-for="(targets, index1) in item.house_tag_ids_text_arr">
										{{targets}}
									</view>
								</view>
								<view class="housecost fwb">¥<text>{{ item.price }}</text>/㎡</view>
							</view>
						</navigator>
					</template>
					<template v-else>
						<image :lazy-load="true" src="/static/images/none-data.png" class="none-data-style"></image>
						<view class="fs28 col9 tc">暂无数据</view>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				// 当前城市
				now_city: '上海市',

				// 城市其下区县
				regionData: [],

				// 房源列表
				houseList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},

				// 已选中的搜索条件
				searchCheckJson: {
					region: '',
					//区域
					sort: 2 //排序:1=默认排序，2=看房次数从大到小（人气排行榜），3=单价从小到大，4=单价从大到小，5=成交量从大到小(热销排行榜)
				},

				index: 0,
				regionPickerData: [],
				nav: 0,
				targets: [],
			};
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value

				var regionPickerData = this.regionPickerData;
				if (e.detail.value == 0) {
					this.searchCheckJson.region = ''

				} else {
					this.searchCheckJson.region = regionPickerData[e.detail.value]

				}
				this.houseList.current_page = 0
				// 获取该城市的房源列表

				this.getHouseList();
			},

			choosenav(e) {

				var nav = e.currentTarget.dataset.navindex;
				this.searchCheckJson.sort = nav,
					this.houseList.current_page = 0

				// 获取该城市的房源列表

				this.getHouseList();
			},

			// 获取房源列表信息
			getHouseList: function() {
				var that = this;
				var json = {
					city: that.now_city
				};
				json.page = Number(that.houseList.current_page) + 1;
				Object.assign(json, this.searchCheckJson);

				if (json.page > 1 && that.houseList.current_page >= that.houseList.last_page) {
					functions.toast('已加载到底部了');
					return false;
				} // 其他搜索条件
				// 。。。

				functions.getAjaxList(that, '/api/xiluhouse/House/house_list', json, function(res) {
					var houseList = res.data;

					if (json.page > 1) {
						var now_houseList_data = that.houseList.data || [];
						var now_houseList_data = now_houseList_data.concat(houseList.data);
						houseList.data = now_houseList_data;
					}

					that.houseList = houseList

				});
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				var now_city = uni.getStorageSync('now_city');
				this.now_city = now_city ? now_city : '上海市'
				// 获取---通用类-城市下区县、街道

				functions.getAjaxData(
					'/api/xiluhouse/universal/region_data', {
						city: that.now_city
					},
					function(res) {
						var now_index = 0;
						var regionPickerData = [];
						regionPickerData[0] = '不限';

						for (let index = 0; index < res.data.length; index++) {
							const element = res.data[index];
							regionPickerData[Number(index) + 1] = element.name;

							if (element.name == that.searchCheckJson.region) {
								now_index = index + 1;
							}
						}

						var region = now_index == 0 ? '' : that.searchCheckJson.region;
						that.searchCheckJson.region = region,
							that.index = now_index,
							that.regionPickerData = regionPickerData,
							that.regionData = res.data

						that.houseList.current_page = 0
						// 获取该城市的房源列表

						that.getHouseList();
					}
				);
			}
		},
		onLoad(options) {
			var rank_type = options.rank_type || 1;
			var sort = rank_type == 1 ? 2 : 5;
			var region = options.region || '';
			this.searchCheckJson.region = options.region || '',
				this.searchCheckJson.sort = sort
			this.initData();
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function() {
			var that=this
			if (that.houseList.current_page >= that.houseList.last_page) {
				// functions.toast('已加载到底部了');
				return false;
			} else {
				that.getHouseList();
			}
		},
	}
</script>

<style lang="scss">
	@import url('@/static/css/old_project.css');

	.topbox {
		width: 750rpx;
		height: 200rpx;
		position: relative;
		padding-top: 36rpx;
		padding-left: 60rpx;
	}

	.topbox.blue {
		background: #cce9ff;
	}

	.topbox.pink {
		background: #feedea;
	}

	.icon_rankdec {
		width: 427rpx;
		height: 133rpx;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.colff7 {
		color: #ff7b40;
	}

	.pickerbox {
		line-height: 40rpx;
		border-radius: 37rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 30rpx rgba(184, 189, 202, 0.3);
		padding: 10rpx 24rpx;
		display: inline-block;
	}

	.icon_close {
		width: 20rpx;
		height: 20rpx;
		margin-left: 11rpx;
		margin-top: 10rpx;
	}

	.navbox {
		height: 97rpx;
		border-bottom: 1px solid #f4f3f3;
		line-height: 97rpx;
		text-align: center;
	}

	.navbox .navitem {
		flex: 1;
		font-size: 30rpx;
		position: relative;
	}

	.navbox .navitem.active {
		color: #0091ff;
	}

	.navbox .navitem.active::after {
		display: block;
		content: "";
		width: 30rpx;
		height: 6rpx;
		border-radius: 50rpx;
		background-color: #0091ff;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}

	.scroll {
		height: calc(100vh - 297rpx);
		width: 100%;
	}

	.houselist {
		padding: 30rpx 40rpx 0;
	}

	.houselist .houseitem {
		padding-bottom: 30rpx;
	}

	.houselist .houseitem .houseimg {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.houselist .houseitem .houseimg image {
		width: 240rpx;
		height: 190rpx;
		position: relative;
		z-index: 1;
	}

	.houselist .houseitem .houseimg .top {
		width: 70rpx;
		height: 35rpx;
		background: linear-gradient(180deg, #F0DEC0, #DCBA8C);
		position: absolute;
		top: 0;
		left: 0;
		color: #fff;
		font-size: 20rpx;
		z-index: 2;
		text-align: center;
		line-height: 35rpx;
	}

	.houselist .houseitem .houseimg .top.grey {
		background: linear-gradient(180deg, #D3D4DD 0%, #999EAD 100%);
	}

	.houselist .housename {
		font-size: 30rpx;
	}

	.houselist .area-size {
		font-size: 24rpx;
		color: #898989;
	}

	.houselist .targetbox {
		padding: 14rpx 0 0;
		width: 100%;
		overflow-x: scroll;
	}

	.houselist .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: 18rpx;
		color: #0091ff;
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.houselist .housecost {
		color: #f8532f;
		font-size: 24rpx;
	}

	.houselist .housecost text {
		font-size: 34rpx;
	}
</style>
